<template>
    <div ref="lrcBox" class="lrc-container">
        <div v-for="(item,index) in contentList" @click="setProcess(item.time)"
             :style="{color:active == index ?'red':'black'}" :key="index">
            {{item.content}}
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: "Lrc",
        props: {
            lrcLink: String
        },
        data() {
            return {
                contentList: [],
                active: 0,
                isCanScroll: true,
                setTimeoutId: null
            }
        },
        computed: {
            ...mapState(['currentTime'])
        },
        methods: {
            setProcess(time) {
                this.$store.commit("changeProcessTime", {processTime: time})
            }
        },
        watch: {
            currentTime() {
                // 监听到了播放时间的变化
                // console.log("监听到了播放时间的当前的播放时间是：" + this.currentTime)
                // 当前的时间
                // 每一行的时间
                // 找到激活的那一行

                // forEach 拿到每一项和每一项的索引
                //  不能退出循环

                // for of 拿到每一项 ，能退出循环， 拿不到索引

                for (let i = 0; i < this.contentList.length; i++) {
                    if (this.contentList[i].time > this.currentTime) {
                        // 找到前一项
                        if (i > 0) {
                            this.active = i - 1;
                            // 获取容器的dom
                            // eslint-disable-next-line
                            // debugger
                            if (this.isCanScroll) {
                                this.$refs.lrcBox.scrollTop = this.$refs.lrcBox.children[this.active].offsetTop - 100;
                            }
                            break;
                        }
                    }
                }
            }
        },
        mounted() {
            this.$refs.lrcBox.addEventListener("touchstart", () => {
                console.log("我触摸屏幕")
                clearTimeout(this.setTimeoutId)
                this.isCanScroll = false
            })
            this.$refs.lrcBox.addEventListener("touchend", () => {
                console.log("我离开屏幕")
                this.setTimeoutId = setTimeout(() => {
                    this.isCanScroll = true;
                }, 2000)
            })
        },
        created() {
            // getLrc(this.lrcLink).then(res => {
            //     console.log(res)
            // })
            // 拿到了歌词数据
            let content = "[ti:大鱼]\r\n[ar:周深]\r\n[al:大鱼]\r\n[by:0]\r\n[offset:0]\r\n[00:02.27]大鱼 (《大鱼海棠》动画电影印象曲) \r\n[00:02.94]\r\n[00:03.63]作词：尹约\r\n[00:04.32]作曲：钱雷\r\n[00:04.91]演唱：周深\r\n[00:05.49]\r\n[00:43.27]海浪无声将夜幕深深淹没\r\n[00:50.09]漫过天空尽头的角落\r\n[00:56.79]大鱼在梦境的缝隙里游过\r\n[01:03.76]凝望你沉睡的轮廓\r\n[01:09.88]看海天一色 听风起雨落\r\n[01:16.48]执子手吹散苍茫茫烟波\r\n[01:23.61]大鱼的翅膀 已经太辽阔\r\n[01:31.09]我松开时间的绳索\r\n[01:37.30]怕你飞远去 怕你离我而去\r\n[01:43.87]更怕你永远停留在这里\r\n[01:50.76]每一滴泪水 都向你流淌去\r\n[01:58.58]倒流进天空的海底\r\n[02:04.68]\r\n[02:19.11]海浪无声将夜幕深深淹没\r\n[02:25.86]漫过天空尽头的角落\r\n[02:32.76]大鱼在梦境的缝隙里游过\r\n[02:39.58]凝望你沉睡的轮廓\r\n[02:45.63]看海天一色 听风起雨落\r\n[02:52.41]执子手吹散苍茫茫烟波\r\n[02:59.30]大鱼的翅膀 已经太辽阔\r\n[03:07.08]我松开时间的绳索\r\n[03:13.09]看你飞远去 看你离我而去\r\n[03:19.86]原来你生来就属于天际\r\n[03:26.68]每一滴泪水 都向你流淌去\r\n[03:34.51]倒流回最初的相遇\r\n[03:44.44]\r\n"
            // 处理这些歌词的数据
            const contentList = content.split("\r\n")
            // console.log(contentList)
            // 实现歌词滚动
            //    1. 需要修改滚动的高度。
            //    2. 需要歌曲播放的进度
            //    3. 建立一下时间和歌词的对应关系（需要处理字符串的数据）
            //    4. 根据当前播放的时间，把对应的歌词滚动到中间

            // 现在歌词是不能直接用的，需要处理这个歌词，处理成 时间和歌词对应关系.
            // 目标： {time:数字单位秒, content: 时间对应的歌词}
            contentList.forEach(item => {
                // 拿到了每一行的内容
                console.log(item)
                // 通过正则表达式进行匹配
                //     [00:43.27]
                const reg = /\[\d*:\d*\.\d*\]/
                let itemMatch = item.match(reg)
                if (itemMatch) {
                    // console.log(itemMatch[0]);
                    // 需要把时间处理成秒
                    // eslint-disable-next-line
                    // debugger
                    let min = Number(itemMatch[0].match(/\[\d*/)[0].substring(1))
                    let sec = Number(itemMatch[0].match(/:\d*/)[0].substring(1))
                    // console.log(min * 60 + sec)
                    // console.log(item.replace(itemMatch[0], ""))
                    let content = item.replace(itemMatch[0], "")
                    if (content) {
                        this.contentList.push({
                            time: min * 60 + sec,
                            content
                        })
                    }

                } else {
                    console.log(item)
                }
            })
        }
    }
</script>

<style scoped lang="less">
    .lrc-container {
        height: 250px;
        overflow: scroll;
        margin: 10px;
        text-align: center;
        line-height: 28px;
        position: relative;
    }
</style>
